const WorkerManagement = {
    template: `
        <div>
            <el-button @click="newWorkerDialogVisible = true" plain round :style="buttonStyle">新增员工</el-button>
            <br>
            <el-table :data="userList"  :style="tableStyle">
                <el-table-column label="ID" prop="adminId"></el-table-column>
                <el-table-column label="用户名" prop="adminUsername"></el-table-column>
                <el-table-column label="姓名" prop="adminName"></el-table-column>
                <el-table-column label="电话号码" prop="adminTelenumber"></el-table-column>
                <el-table-column label="用户组" prop="role"></el-table-column>
                 <el-table-column label="操作" width="250" :label-style="{ padding: '5px 10px', textAlign: 'center' }">
              <template #default="{ row }">
                <div style="display: flex; justify-content: space-between;">
                  <el-button 
                    @click="editUser(row)" 
                    type="primary" 
                    text 
                    size="small"
                    style="margin-right: 10px; border: 1px solid #dcdfe6; padding: 5px 10px; font-size: 12px;"
                  >更改信息</el-button>
                  <el-button 
                    @click="resetPassword(row)" 
                    type="primary" 
                    text 
                    size="small"
                    style="margin-right: 10px; border: 1px solid #dcdfe6; padding: 5px 10px;font-size: 12px;"
                  >修改密码</el-button>
                  <el-popconfirm 
                    title="确定要删除此用户吗？（操作不可逆）"
                    width="300px"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    confirm-button-type="danger"
                    @confirm="deleteUser(row.adminId)"
                  >
                    <template #reference>
                      <el-button 
                        type="danger" 
                        primary
                        size="small"
                        style="margin-right: 10px;border: 1px solid #dcdfe6; padding: 5px 10px;font-size: 12px;"
                      >删除</el-button>
                    </template>
                  </el-popconfirm>
                </div>
              </template>
            </el-table-column>

            </el-table>

            <!-- 编辑用户信息的对话框 -->
            <el-dialog
              v-model="profileDialogVisible"
              title="更改员工信息"
              width="400px">

                <el-form :model="currentUser" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="currentUser.adminUsername" placeholder="请输入用户名" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="姓名">
                        <el-input v-model="currentUser.adminName" placeholder="请输入姓名" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="电话号码">
                        <el-input v-model="currentUser.adminTelenumber" placeholder="请输入电话号码" style="width: 250px"></el-input>
                    </el-form-item>

                    <el-form-item label="用户组">
                        <el-select v-model="currentUser.role" placeholder="请选择用户组" style="width: 250px">
                            <el-option label="Administrator" value="Administrator"></el-option>
                            <el-option label="Worker" value="Worker"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="profileDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveUser">保存</el-button>
                </div>
            </el-dialog>

            <!-- 修改密码的对话框。 -->
            <el-dialog 
              v-model="passwordDialogVisible"
              title="修改密码"
              width="400px">

                <el-form :model=resetPasswordForm label-width="80px">
                    <el-form-item label="密码">
                        <el-input v-model="resetPasswordForm.password" type="password" show-password style="width: 250px"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="resetPasswordForm.confirm_password" type="password" show-password style="width: 250px"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="passwordDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="savePassword">保存</el-button>
                </div>
            </el-dialog>

            <!-- 新增员工的对话框。 -->
            <el-dialog v-model="newWorkerDialogVisible" title="新增员工" width="400px">
                <el-form :model="newWorkerForm" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="newWorkerForm.username" type="text" style="width: 250px"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="newWorkerForm.password" type="password" show-password style="width: 250px"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="newWorkerForm.confirm_password" type="password" show-password style="width: 250px"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="newWorkerForm.name" type="text" style="width: 250px"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码">
                        <el-input v-model="newWorkerForm.telephone" type="number" style="width: 250px"></el-input>
                    </el-form-item>
                    <el-form-item label="用户组">
                    <el-select v-model="newWorkerForm.role" placeholder="请选择用户组" style="width: 250px">
                            <el-option label="Administrator" value="Administrator"></el-option>
                            <el-option label="Worker" value="Worker"></el-option>
                        </el-select>
                    </el-form-item>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="newWorkerDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="onNewWorkerFormSubmit">注册</el-button>
                    </div>
                </el-form>
            </el-dialog>
        </div>
    `,
    setup() {
        const userList = ref([]);

        // 对话框可见性。
        const profileDialogVisible = ref(false);
        const passwordDialogVisible = ref(false);
        const newWorkerDialogVisible = ref(false);

        // 当前正在编辑的用户数据。
        const currentUser = ref({
            adminId: null,
            adminUsername: '',
            adminName: '',
            adminTelenumber: '',
            role: ''
        });

        // 更新的密码。
        const resetPasswordForm = ref({
            id: null,
            password: null,
            confirm_password: null
        })

        // 新增员工的表单。
        const newWorkerForm = ref({
            username: "",
            password: "",
            confirm_password: "",
            name: "",
            telephone: "",
            role: ""
        })

        // 编辑用户信息。
        const editUser = (user) => {
            // 将选中的用户数据填充到编辑表单
            currentUser.value = { ...user };
            profileDialogVisible.value = true;
        };

        // 单击修改密码选项的事件。
        const resetPassword = (user) => {
            resetPasswordForm.value.id = user.adminId;
            passwordDialogVisible.value = true;
        };

        const saveUser = () => {
            const params = new URLSearchParams();
            params.append("id", currentUser.value.adminId);
            params.append("username", currentUser.value.adminUsername);
            params.append("name", currentUser.value.adminName);
            params.append("telephone", currentUser.value.adminTelenumber);
            params.append("role", currentUser.value.role);

            axios.post("http://localhost:8080/admin/updateUser", params).then((response) => {
                const res = response.data;
                if (res.code === 200) {
                    app.config.globalProperties.$message({
                        message: "信息已更新。",
                        type: "success",
                    });
                }
                else if (res.code === 500) {
                    app.config.globalProperties.$message({
                        message: "信息更新失败。",
                        type: "error",
                    });
                }
            })

            profileDialogVisible.value = false;
            window.location.reload();   // 刷新，以显示最新的信息。
        };

        // 在对话框中单击确定后的事件。
        const savePassword = () => {
            console.log(resetPasswordForm)
            if (resetPasswordForm.value.password.trim() === "") {
                app.config.globalProperties.$message({
                    message: "密码不能为空。",
                    type: "error",
                })
            }
            else if (resetPasswordForm.value.password !== resetPasswordForm.value.confirm_password) {
                app.config.globalProperties.$message({
                    message: "两次输入的密码不一致。",
                    type: "error"
                })
            }
            else {
                const params = new URLSearchParams();
                params.append("id", resetPasswordForm.value.id);
                params.append("password", resetPasswordForm.value.password);

                axios.post("http://localhost:8080/admin/updateUserPassword", params).then((response) => {
                    const res = response.data;
                    if (res.code === 200) {
                        app.config.globalProperties.$message({
                            message: "密码已更新。",
                            type: "success",
                        });
                    }
                    else if (res.code === 500) {
                        app.config.globalProperties.$message({
                            message: "密码更新失败。",
                            type: "error",
                        });
                    }
                })

                passwordDialogVisible.value = false;
            }
        }

        // 确认删除用户的事件。
        const deleteUser = (id) => {
            const params = new URLSearchParams();
            params.append("id", id);

            axios.post("http://localhost:8080/admin/deleteUser", params).then((response) => {
                const res = response.data;
                if (res.code === 200) {
                    app.config.globalProperties.$message({
                        message: "用户已删除。",
                        type: "success",
                    });
                }
                else if (res.code === 500) {
                    app.config.globalProperties.$message({
                        message: "用户删除失败。",
                        type: "error",
                    });
                }

                window.location.reload();   // 刷新，以显示最新的信息。
            })
        }

        const tableStyle = {
            backdropFilter: "blur(10px)",
            WebkitBackdropFilter: "blur(10px)",
            borderRadius: "12px",
            boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
            border: "1px solid rgba(255, 255, 255, 0.4)",
            overflow: "hidden"
        }

        const onNewWorkerFormSubmit = () => {
            if (newWorkerForm.value.username.trim() === "") {
                app.config.globalProperties.$message({
                    message: "用户名不能为空。",
                    type: "error",
                })
            }
            else if (newWorkerForm.value.password.length === 0) {
                app.config.globalProperties.$message({
                    message: "密码不能为空。",
                    type: "error",
                })
            }
            else if (newWorkerForm.value.password !== newWorkerForm.value.confirm_password) {
                app.config.globalProperties.$message({
                    message: "两次输入的密码不一致。",
                    type: "error"
                })
            }
            else if (newWorkerForm.value.name.trim() === "") {
                app.config.globalProperties.$message({
                    message: "姓名不能为空。",
                    type: "error",
                })
            }
            else if (newWorkerForm.value.telephone.length === 0) {
                app.config.globalProperties.$message({
                    message: "电话号码不能为空。",
                    type: "error",
                })
            }
            else {
                const params = new URLSearchParams();
                params.append("username", newWorkerForm.value.username);
                params.append("password", newWorkerForm.value.password);
                params.append("name", newWorkerForm.value.name);
                params.append("telephone", newWorkerForm.value.telephone);
                params.append("role", newWorkerForm.value.role);

                axios.post("http://localhost:8080/admin/register", params).then((response) => {
                    const res = response.data;
                    if (res.code === 200) {
                        app.config.globalProperties.$message({
                            message: "注册成功。",
                            type: "success",
                        });

                        // 延时刷新以获取最新数据。
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    }
                    else if (res.code === 500) {
                        app.config.globalProperties.$message({
                            message: "注册失败。",
                            type: "error",
                        });
                    }

                    newWorkerDialogVisible.value = false;
                })
            }
        }

        const buttonStyle = {
            width: "100%",
            marginBottom: "10px"
        }

        // 使用 axios 获取数据。
        const fetchUserList = async () => {
            try {
                const response = await axios.get("http://localhost:8080/admin/getUserList");
                if (response.data.code === 200) {
                    userList.value = response.data.data;
                } else {
                    app.config.globalProperties.$message({
                        message: '加载失败: ' + response.data.msg,
                        type: 'error'
                    });
                }
            } catch (error) {
                console.error("请求失败", error);
                app.config.globalProperties.$message({
                    message: '请求失败，请重试。',
                    type: 'error'
                });
            }
        };

        // 调用请求方法。
        fetchUserList();

        return {
            userList,
            profileDialogVisible,
            passwordDialogVisible,
            currentUser,
            editUser,
            saveUser,
            resetPasswordForm,
            resetPassword,
            savePassword,
            deleteUser,
            newWorkerForm,
            newWorkerDialogVisible,
            onNewWorkerFormSubmit,
            tableStyle,
            buttonStyle
        };

    }
};